<template>
  <div>
    <div class="search-term">
      <el-form :inline="true" :model="searchInfo" class="demo-form-inline">      
        <el-form-item label="需求企业">
            <el-select clearable filterable v-model="searchInfo.buyId" placeholder="请选择">
                <el-option
                        v-for="item in userList"
                        :key="item.ID"
                        :label="item.name"
                        :value="item.ID"
                />
            </el-select>
        </el-form-item>
          <el-form-item label="供应企业">
              <el-select clearable filterable v-model="searchInfo.sellerId" placeholder="请选择">
                  <el-option
                          v-for="item in userList"
                          :key="item.ID"
                          :label="item.name"
                          :value="item.ID"
                  />
              </el-select>
          </el-form-item>
          <el-form-item label="采购清单名称">
          <el-input placeholder="搜索条件" v-model="searchInfo.name"></el-input>
        </el-form-item>    
        <el-form-item label="平台采购单编号">
          <el-input placeholder="搜索条件" v-model="searchInfo.orderSn"></el-input>
        </el-form-item>      
        <el-form-item label="项目">
            <el-select clearable filterable v-model="searchInfo.projectId" placeholder="请选择">
                <el-option
                        v-for="item in projectList"
                        :key="item.ID"
                        :label="item.proName"
                        :value="item.ID"
                />
            </el-select>
        </el-form-item>
        <el-form-item label="状态">
            <el-select clearable v-model="searchInfo.status" placeholder="请选择">
                <el-option
                        v-for="item in statusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                />

            </el-select>
        </el-form-item>    
<!--        <el-form-item label="自有采购单编号">-->
<!--          <el-input placeholder="搜索条件" v-model="searchInfo.userSn"></el-input>-->
<!--        </el-form-item>    -->
        <el-form-item>
          <el-button @click="onSubmit" type="primary">查询</el-button>
        </el-form-item>
          <el-form-item>
              <el-button @click="rt" type="primary">重置</el-button>
          </el-form-item>
<!--        <el-form-item>-->
<!--          <el-button @click="openDialog" type="primary">新增userOrder表</el-button>-->
<!--        </el-form-item>-->
        <el-form-item>
          <el-popover placement="top" v-model="deleteVisible" width="160">
            <p>确定要删除吗？</p>
              <div style="text-align: right; margin: 0">
                <el-button @click="deleteVisible = false" size="mini" type="text">取消</el-button>
                <el-button @click="onDelete" size="mini" type="primary">确定</el-button>
              </div>
<!--            <el-button icon="el-icon-delete" size="mini" slot="reference" type="danger">批量删除</el-button>-->
          </el-popover>
        </el-form-item>
      </el-form>
    </div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      border
      ref="multipleTable"
      stripe
      style="width: 100%"
      tooltip-effect="dark"
    >
     <el-table-column label="需求企业" prop="sellerId" width="120">
            <template slot-scope="scope">
                {{scope.row.buy_user.name}}
            </template>
     </el-table-column>
    <el-table-column label="平台采购单编号" prop="orderSn" width="120"></el-table-column>
    <el-table-column label="项目名称">
        <template slot-scope="scope">
            {{scope.row.project.proName}}
        </template>
    </el-table-column>
     <el-table-column label="供应企业" prop="sellerId" width="120">
         <template slot-scope="scope">
             {{scope.row.seller_user.name}}
         </template>
     </el-table-column>
        <el-table-column label="采购清单名称" prop="name" width="120"></el-table-column>
        <el-table-column label="日期" width="180">
         <template slot-scope="scope">{{scope.row.CreatedAt|formatDate}}</template>
    </el-table-column>
       <el-table-column label="状态" width="120">
           <template slot-scope="scope">
               <div v-for="item in statusOptions" v-if="item.value == scope.row.status">
                   {{ item.label }}
               </div>
           </template>
       </el-table-column>
        <el-table-column label="按钮组">
        <template slot-scope="scope">
          <el-button class="table-button" @click="updateUserOrder(scope.row)" size="small" type="primary" icon="el-icon-edit">变更</el-button>
<!--          <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteRow(scope.row)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="page"
      :page-size="pageSize"
      :page-sizes="[10, 30, 50, 100]"
      :style="{float:'right',padding:'20px'}"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
    ></el-pagination>

    <el-dialog :before-close="closeDialog" :visible.sync="dialogFormVisible" title="弹窗操作">
      <el-form :model="formData" label-position="right" label-width="80px">
         <el-form-item label="报价形式:">
            <el-input v-model="formData.buType" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="采购企业联系人:">
            <el-input v-model="formData.buyContaxt" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="采购方合同图片:">
            <el-input v-model="formData.buyContract" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="买家:"><el-input v-model.number="formData.buyId" clearable placeholder="请输入"></el-input>
      </el-form-item>
       
         <el-form-item label="采购企业手机号:">
            <el-input v-model="formData.buyPhone" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="采购说明:">
            <el-input v-model="formData.desc" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="采购说明图片:">
            <el-input v-model="formData.descPic" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="收获地区:">
            <el-input v-model="formData.getAddress" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="收货日期:">
            <el-input v-model="formData.getDate" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="是否发布到求购大厅:">
            <el-switch active-color="#13ce66" inactive-color="#ff4949" active-text="是" inactive-text="否" v-model="formData.isPublic" clearable ></el-switch>
      </el-form-item>
       
         <el-form-item label="采购清单名称:">
            <el-input v-model="formData.name" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="平台订单号:">
            <el-input v-model="formData.orderSn" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="交易方式:">
            <el-input v-model="formData.payType" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="项目ID:">
            <el-input v-model="formData.projectId" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="供应企业联系人:">
            <el-input v-model="formData.sellContaxt" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="供应企业图片:">
            <el-input v-model="formData.sellContract" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="供应企业备注:">
            <el-input v-model="formData.sellDesc" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="供应企业手机号:">
            <el-input v-model="formData.sellPhone" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       
         <el-form-item label="卖家:"><el-input v-model.number="formData.sellerId" clearable placeholder="请输入"></el-input>
      </el-form-item>
       
         <el-form-item label="1待审核。2驳回。3待报价，双方上传合同。4待合同审核。5待平台上传付款凭证。6待双方上传收发货凭证。7待平台收发货凭证审核。8完整订单:"><el-input v-model.number="formData.status" clearable placeholder="请输入"></el-input>
      </el-form-item>
       
         <el-form-item label="自有采购单编号:">
            <el-input v-model="formData.userSn" clearable placeholder="请输入" ></el-input>
      </el-form-item>
       </el-form>
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button @click="enterDialog" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import {
        getUserProjectList
    } from '@/api/userProject' //  此处请自行替换地址
import { getUsersList } from '@/api/users'
import {
    createUserOrder,
    deleteUserOrder,
    deleteUserOrderByIds,
    updateUserOrder,
    findUserOrder,
    getUserOrderList
} from "@/api/userOrder";  //  此处请自行替换地址
import { formatTimeToStr } from "@/utils/date";
import infoList from "@/mixins/infoList";
export default {
  name: "UserOrder",
  mixins: [infoList],
  data() {
    return {
      projectList:[],
      userList:[],
        // 1待审核。2驳回。3待报价，双方上传合同。4待合同审核。5待平台上传付款凭证。6待双方上传收发货凭证。7待平台收发货凭证审核。8订单完成
        statusOptions:[
            {
                value: 1,
                label: '1:待审核'
            }, {
                value: 2,
                label: '2:驳回'
            }, {
                value: 3,
                label: '3:待报价，双方上传合同'
            },
            {
                value: 4,
                label: '4:待合同审核'
            },
            {
                value: 5,
                label: '5:待平台上传付款凭证'
            },
            {
                value: 6,
                label: '6:双方上传收发货凭证'
            },
            {
                value: 7,
                label: '7:待平台收发货凭证审核'
            },
            {
                value: 8,
                label: '8:订单完成'
            }
        ],
      listApi: getUserOrderList,
      dialogFormVisible: false,
      type: "",
      deleteVisible: false,
      multipleSelection: [],formData: {
            buType:"",
            buyContaxt:"",
            buyContract:"",
            buyId:0,
            buyPhone:"",
            desc:"",
            descPic:"",
            getAddress:"",
            getDate:"",
            isPublic:false,
            name:"",
            orderSn:"",
            payType:"",
            projectId:"",
            sellContaxt:"",
            sellContract:"",
            sellDesc:"",
            sellPhone:"",
            sellerId:0,
            status:0,
            userSn:"",
            
      }
    };
  },
  filters: {
    formatDate: function(time) {
      if (time != null && time != "") {
        var date = new Date(time);
        return formatTimeToStr(date, "yyyy-MM-dd hh:mm:ss");
      } else {
        return "";
      }
    },
    formatBoolean: function(bool) {
      if (bool != null) {
        return bool ? "是" :"否";
      } else {
        return "";
      }
    }
  },
  methods: {
      rt(){
          this.searchInfo = {}
          this.getTableData()
      },
      //条件搜索前端看此方法
      onSubmit() {
        this.page = 1
        this.pageSize = 10               
        if (this.searchInfo.isPublic==""){
          this.searchInfo.isPublic=null
        }                 
        this.getTableData()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      deleteRow(row){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           this.deleteUserOrder(row);
        });
      },
      async onDelete() {
        const ids = []
        if(this.multipleSelection.length == 0){
          this.$message({
            type: 'warning',
            message: '请选择要删除的数据'
          })
          return
        }
        this.multipleSelection &&
          this.multipleSelection.map(item => {
            ids.push(item.ID)
          })
        const res = await deleteUserOrderByIds({ ids })
        if (res.code == 0) {
          this.$message({
            type: 'success',
            message: '删除成功'
          })
          if (this.tableData.length == ids.length && this.page > 1) {
              this.page--;
          }
          this.deleteVisible = false
          this.getTableData()
        }
      },
    async updateUserOrder(row) {
        this.$router.push({
            name: 'goods_order_detail',
            query: { 'id': row.ID }
        })
        // this.$router.push({path:'/layout/usersGoodsInfo/goods_order_detail?id='+row.ID })

      // const res = await findUserOrder({ ID: row.ID });
      // this.type = "update";
      // if (res.code == 0) {
      //   this.formData = res.data.reuserOrder;
      //   this.dialogFormVisible = true;
      // }
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.formData = {
          buType:"",
          buyContaxt:"",
          buyContract:"",
          buyId:0,
          buyPhone:"",
          desc:"",
          descPic:"",
          getAddress:"",
          getDate:"",
          isPublic:false,
          name:"",
          orderSn:"",
          payType:"",
          projectId:"",
          sellContaxt:"",
          sellContract:"",
          sellDesc:"",
          sellPhone:"",
          sellerId:0,
          status:0,
          userSn:"",
          
      };
    },
    async deleteUserOrder(row) {
      const res = await deleteUserOrder({ ID: row.ID });
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "删除成功"
        });
        if (this.tableData.length == 1 && this.page > 1 ) {
            this.page--;
        }
        this.getTableData();
      }
    },
    async enterDialog() {
      let res;
      switch (this.type) {
        case "create":
          res = await createUserOrder(this.formData);
          break;
        case "update":
          res = await updateUserOrder(this.formData);
          break;
        default:
          res = await createUserOrder(this.formData);
          break;
      }
      if (res.code == 0) {
        this.$message({
          type:"success",
          message:"创建/更改成功"
        })
        this.closeDialog();
        this.getTableData();
      }
    },
    openDialog() {
      this.type = "create";
      this.dialogFormVisible = true;
    }
  },
  async created() {
    var userlist = await getUsersList({page:1,pageSize:1000000})
    this.userList = userlist.data.list
    var userProject = await getUserProjectList({page:1,pageSize:100000})
    this.projectList = userProject.data.list
    console.log(this.projectList)
    await this.getTableData();
  
}
};
</script>

<style>
</style>
